<template>
  <div class="header-nav">
    <div class="header-nav-item">
      <h1>联网大数据服务平台</h1>
    </div>
    <div class="header-nav-item">
      <router-link
        class="nav-option"
        :class="activeIndex == index ? 'active' : ''"
        to="#"
        v-for="(item, index) in menuList"
        :key="index"
        @click.native="changeActive(index, item)"
      >
        <div class="nav-option-image">
          <img :src="item.imagesUrl" />
        </div>
        <div class="nav-option-text">{{ item.menuName }}</div>
        <div v-if="subMenuActive" class="sub-menu">
          <router-link
            class="sub-menu-1"
            to="#"
            v-for="(subItem, subIndex) in item.childMenu"
            :key="subIndex"
            @mouseover.native.self="mouseroverActive(subItem, subIndex)"
            @mouseleave.native="mouseleaveActive($event)"
          >
            {{ subItem.menuName }}
            <div
              class="three-level-menu"
              v-if="subIndex == subActive && threeSubMenuActive"
            >
              <router-link
                class="sub-menu-2"
                to="#"
                v-for="(threeSubItem, threeSubIndex) in subItem.childMenu"
                :key="threeSubIndex"
              >
                {{ threeSubItem.menuName }}
              </router-link>
            </div>
          </router-link>
        </div>
      </router-link>
    </div>
    <div class="header-nav-item">
      <div class="header-user-role">用户:<span>管理员</span></div>
      <div class="header-user-login">注销</div>
    </div>
  </div>
</template>
<script>
export default {
  data() {
    return {
      activeIndex: 0,
      subMenuActive: false,
      threeSubMenuActive: true,
      threeSubMeunList: [],
      isHover: false,
      subActive: 0,
      menuList: [
        {
          id: '1',
          menuName: '数据概览',
          childMenu: null,
          imagesUrl: require('../../assets/images/nav_1.png'),
        },
        {
          id: '2',
          menuName: '车辆监控',
          childMenu: null,
          imagesUrl: require('../../assets/images/nav_2.png'),
        },
        {
          id: '3',
          menuName: '政府监管',
          childMenu: null,
          imagesUrl: require('../../assets/images/nav_3.png'),
        },
        {
          id: '4',
          menuName: '参数设置',
          childMenu: null,
          imagesUrl: require('../../assets/images/nav_4.png'),
        },
        {
          id: '5',
          menuName: '车载视频',
          childMenu: null,
          imagesUrl: require('../../assets/images/nav_5.png'),
        },
        {
          id: '6',
          menuName: '视频监控',
          childMenu: null,
          imagesUrl: require('../../assets/images/nav_6.png'),
        },
        {
          id: '7',
          menuName: '查询统计',
          childMenu: null,
          imagesUrl: require('../../assets/images/nav_7.png'),
        },
        {
          id: '8',
          menuName: '系统设置',
          childMenu: [
            {
              id: '8-1',
              menuName: '平台管理',
              childMenu: [
                {
                  id: '8-1-1',
                  menuName: '平台管理1',
                },
                {
                  id: '8-1-2',
                  menuName: '平台管理2',
                },
                {
                  id: '8-1-3',
                  menuName: '平台管理3',
                },
              ],
            },
            {
              id: '8-2',
              menuName: '设备管理',
              childMenu: [
                {
                  id: '8-2-1',
                  menuName: '设备管理1',
                },
                {
                  id: '8-2-2',
                  menuName: '设备管理2',
                },
                {
                  id: '8-2-3',
                  menuName: '设备管理3',
                },
              ],
            },
            {
              id: '8-3',
              menuName: '系统设置',
              childMenu: [
                {
                  id: '8-3-1',
                  menuName: '系统设备1',
                },
                {
                  id: '8-3-2',
                  menuName: '系统设备2',
                },
                {
                  id: '8-3-3',
                  menuName: '系统设备3',
                },
              ],
            },
          ],
          imagesUrl: require('../../assets/images/nav_8.png'),
        },
      ],
    }
  },
  methods: {
    changeActive(index, item) {
      this.activeIndex = index
      if (index == 7 && item.childMenu) {
        // 激活二级菜单
        this.subMenuActive = true
      } else {
        this.subMenuActive = false
      }
    },
    mouseroverActive(subItem, subIndex) {
      // console.log(subItem)
      // console.log(subIndex)
      // console.log('111')
      this.subActive = subIndex
      if (!subItem.childMenu) {
        this.threeSubMenuActive = false
      } else {
        this.threeSubMenuActive = true
        this.threeSubMeunList = subItem.childMenu
      }
    },
    mouseleaveActive(event) {
      event.stopPropagation()
      this.threeSubMenuActive = false
    },
  },
}
</script>
<style lang="less" scoped>
.header-nav {
  height: 1.157895rem;
  background-color: #030829;
  display: flex;
  .header-nav-item {
    &:nth-child(1) {
      width: 5.105263rem;
      > h1 {
        font-size: 0.368421rem;
        text-align: center;
        line-height: 1.157895rem;
      }
    }
    &:nth-child(3) {
      width: 6.315789rem;
      display: flex;
      > div {
        flex: 1;
        text-align: center;
        line-height: 1.157895rem;
        font-size: 14px;
      }
      .header-user-login {
        position: relative;
        &::after {
          content: '';
          display: block;
          position: absolute;
          top: 0.485263rem;
          right: 0.957895rem;
          width: 0;
          height: 0;
          border-left: 5px solid transparent;
          border-right: 5px solid transparent;
          border-top: 10px solid #fff;
        }
      }
    }
    &:nth-child(2) {
      flex: 1;
      display: flex;
      justify-content: space-between;
      .nav-option {
        display: flex;
        width: 1.578947rem;
        color: #fff;
        position: relative;
        .nav-option-image {
          width: 0.263158rem;
          > img {
            width: 0.263158rem;
            height: 0.263158rem;
            position: relative;
            top: 0.447368rem;
          }
        }
        .nav-option-text {
          flex: 1;
          text-align: center;
          line-height: 1.157895rem;
          font-size: 14px;
        }
        .sub-menu {
          position: absolute;
          top: 1.184211rem;
          width: 1.578947rem;
          .sub-menu-1 {
            display: block;
            height: 0.526316rem;
            color: #fff;
            text-align: center;
            line-height: 0.526316rem;
            // &:hover {
            //   background-color: #4b8df8;
            // }
          }
          .three-level-menu {
            position: absolute;
            left: 1.578947rem;
            top: 0;
            width: 1.578947rem;
            .sub-menu-2 {
              display: block;
              height: 0.526316rem;
              text-align: center;
              color: #fff;
              line-height: 0.526316rem;
              &:hover {
                background-color: #4b8df8;
              }
            }
          }
        }
      }
    }
  }
}
.active {
  &::after {
    content: '';
    position: absolute;
    display: block;
    bottom: 0;
    z-index: 999;
    height: 0.065789rem;
    width: 100%;
    background-color: #4b8df8;
  }
}
.hover-color {
  background-color: #4b8df8;
}
</style>
